<template>
  <ElScrollbar>
    <div class="grid-box" :class="[$attrs.class]">
      <slot />
    </div>
  </ElScrollbar>
</template>
<script setup lang="ts">
  import { ElScrollbar } from 'element-plus';

  const props = defineProps<{column?: number, gap?: string}>()
  const column = props.column || 5
  const gap = props.gap || '5px'
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: repeat(v-bind(column), minmax(0, 1fr));
    gap: v-bind(gap);
    overflow-y: auto;
  }
</style>
